<template>
  <!-- 列表 -->
  <div class="list">
    <div class="item" v-for="item in commentList" :key="item.id">
      <div class="user">
        <img :src="item.member.avatar" alt="" />
        <span>{{ formatNickname(item.member.nickname) }}</span>
      </div>
      <div class="body">
        <div class="score">
          <i v-for="i in item.score" :key="i" class="iconfont icon-wjx01"></i>
          <i
            v-for="i in 5 - item.score"
            :key="i"
            class="iconfont icon-wjx02"
          ></i>
          <span class="attr">{{ formatSpecs(item.orderInfo.specs) }}</span>
        </div>
        <div class="text">{{ item.content }}</div>
        <GoodsCommentImage
          v-if="item.pictures.length"
          :pictures="item.pictures"
        />
        <div class="time">
          <span>{{ item.createTime }}</span>
          <span class="zan">
            <i class="iconfont icon-dianzan"></i>
            {{ item.praiseCount }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsCommentImage from './goods-comment-image.vue'
export default {
  components: { GoodsCommentImage },
  props: ['commentList'],
  name: 'GoodsCommentList',
  setup() {
    // 定义转换数据的函数（对应vue2.0的过滤器）
    const formatSpecs = (specs) => {
      return specs.map((v) => `${v.name}：${v.nameValue}`).join(' ')
    }
    const formatNickname = (nickname) => {
      return nickname.slice(0, 1) + '****' + nickname.slice(-1)
    }
    return {}
  },
}
</script>

<style lang="less">
.list {
  padding: 0 20px;
  .item {
    display: flex;
    padding: 25px 10px;
    border-bottom: 1px solid #f5f5f5;
    .user {
      width: 160px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
      span {
        padding-left: 10px;
        color: #666;
      }
    }
    .body {
      flex: 1;
      .score {
        line-height: 40px;
        .iconfont {
          color: #ff9240;
          padding-right: 3px;
        }
        .attr {
          padding-left: 10px;
          color: #666;
        }
      }
    }
    .text {
      color: #666;
      line-height: 24px;
    }
    .time {
      color: #999;
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
  }
}
</style>
